<template>
    <div class="router-item-page">
        <div class="options-view">
            <el-button type="primary" size="small" @click="openCreate">新增</el-button>
        </div>
        <div class="table-view">
            <div class="table-list">
                <el-table row-key="id" :data="tableData" border style="width: 100%;height:100%">
                    <el-table-column prop="name" label="名称" width=160 />
                    <el-table-column prop="icon" label="图标" width=70 >
                        <template #default="scope">
                            <component :is="scope.row.icon || 'Loading'" class="icon-item" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="path" label="路径" width=400 />
                    <el-table-column prop="redirect" label="重定向" width=400 />
                    <el-table-column prop="status" label="状态" width=60 />
                    <el-table-column prop="update_time" label="更新时间" width=240 />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="openDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-helper">
                <el-pagination background layout="prev, pager, next" :total="totle" />
            </div>
        </div>
    </div>

    <el-dialog v-model="showCreate" width="400" style="padding: 0 48px 48px 24px;">
        <div class="dialog-title">新增</div>
        <el-form :model="createObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="createObj.name" class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="图标">
                <component :is="createObj.icon || 'Loading'" class="icon-item" @click="showIcons = true" />
            </el-form-item>
            <el-form-item label="上级">
                <el-select v-model="createObj.father"  @change="selectFather">
                    <el-option v-for="item in pageOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="createObj.path" class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="重定向">
                <el-input v-model="createObj.redirect" class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureCreate">确 定</el-button>
            <el-button @click="showCreate = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showEdit" width="400" style="padding:  0 48px 48px 24px;">
        <div class="dialog-title">修改</div>
        <el-form :model="editObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="editObj.name" class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="图标">
                <component :is="editObj.icon || 'Loading'" class="icon-item" @click="showIcons = true" />
            </el-form-item>
            <el-form-item label="上级">
                <el-select v-model="editObj.father" @change="selectFather">
                    <el-option v-for="item in pageOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="editObj.path" class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="重定向">
                <el-input v-model="editObj.redirect" class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureEdit">确 定</el-button>
            <el-button @click="showEdit = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showDelete" width="400" style="padding:  0 48px 48px 24px;">
        <div class="dialog-title">删除</div>
        <el-form :model="deleteObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="deleteObj.name" disabled class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="deleteObj.icon" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="上级">
                <el-input v-model="deleteObj.father" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="deleteObj.path" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="重定向">
                <el-input v-model="deleteObj.redirect" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureDelete">确 定</el-button>
            <el-button @click="showDelete = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showIcons" width="800" style="padding:  24px 24px 24px 36px;">
        <component v-for="icon in icons" :is="icon" class="icon-item" @click="selectIcon(icon)" />
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import apis from '@apis'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const tableData = ref([])
const pageOptions = ref([])
const totle = ref(0)
const pageSize = 10
const currentPage = ref(1)

const createObj = ref({})
const showCreate = ref(false)
const openCreate = () => {
    createObj.value = {
        name: '',
        icon: 'Loading',
        father: 0,
        path: '',
        redirect: ''
    }
    showCreate.value = true
}
const sureCreate = () => {
    apis.pages.create(createObj.value).then(res => {
        showCreate.value = false
        initTableList()
    })
}

const editObj = ref({})
const showEdit = ref(false)
const openEdit = (row) => {
    showEdit.value = true
    editObj.value = JSON.parse(JSON.stringify(row))
}
const sureEdit = () => {
    apis.pages.update(editObj.value).then(res => {
        showEdit.value = false
        initTableList()
    })
    showEdit.value = false
}

// 选中上级之后帮用户输入上级的路径
const selectFather = (val) => {
    if(val != 0) {
        let father = tableData.value.filter(item => item.id == val)[0]
        createObj.value.path = father.path + '/'
        editObj.value.path = father.path + '/'
    }
}

const deleteObj = ref({})
const showDelete = ref(false)
const openDelete = (row) => {
    showDelete.value = true
    deleteObj.value = row
}
const sureDelete = () => {
    apis.pages.delet(deleteObj.value.id).then(res => {
        showDelete.value = false
        initTableList() 
    })
}

const showIcons = ref(false)
const icons = ref([])
const selectIcon = (icon) => {
    if (showCreate.value) {
        createObj.value.icon = icon
    } else if (showEdit.value) {
        editObj.value.icon = icon
    }
    showIcons.value = false
}



const initTableList = () => {
    apis.pages.gets().then(res => {
        let fathers = res.pages.filter(item => item.father == 0)
        let childrens = res.pages.filter(item => item.father != 0)
        pageOptions.value = [{ name: '无', value: 0 }]
        for (let i = 0; i < fathers.length; i++) {
            pageOptions.value.push({ name: fathers[i].name, value: fathers[i].id })
            fathers[i].children = childrens.filter(item => item.father == fathers[i].id)
        }
        tableData.value = fathers
    })
}
const initIcons = () => {
    for (const [key] of Object.entries(ElementPlusIconsVue)) {
        icons.value.push(key)
    }
}
onMounted(() => {
    initTableList()
    initIcons()
})
</script>